<template>
    <div id="auth-data">
        <el-dialog
            :title="$t('key_13')"
            v-model="isDataDialog"
            draggable 
            :close-on-click-modal="false" 
            width="769px" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-tree 
                ref="treeData"
                :data="menuInfo" 
                :highlight-current="true" 
                :default-expand-all="true" 
                :expand-on-click-node="false" 
                :default-checked-keys="defaultChecked"
                node-key="id"
                :props="defaultProps" 
                show-checkbox
                :check-strictly="true"
                @check-change="handleNodeClick">
            </el-tree>
            <template #footer>
                <el-button @click="cancelDataClick">{{ $t('key_24') }}</el-button>
                <el-button type="primary" :disabled="repeatDis" @click="controlDataClick">{{ $t('key_25') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { ElMessage, ElDialog, ElTree, ElButton } from 'element-plus'
import { defineComponent, computed , ref, reactive , toRefs , watch , toRef , toRaw , onMounted, Ref } from 'vue'
import { getOrgTree , sysUserGrantData , sysUserOwnData } from '/@/api/manage/manage'
import treeData from '/@/views/resources/config/tree/treeData'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;
/*** 定义接口基础数据类型 */
interface data {
    repeatDis ? : boolean
}
export default defineComponent( {
    name: 'auth-data',
    components: {},
    props:{
        menuInfo: {
            type: Array,
            default: []
        },
        isDataDialog: {
            type: Boolean,
            default: false
        },
        useId: {
            type: String,
            default: ''
        },
    },
    setup(props,ctx){
        /*** 引用接口定义基础数据初始值 */
        const state = reactive < data > ({
            repeatDis: false
        })
        let treeData: Ref = ref(null)
        let subArr:any[] = []
        const defaultChecked = ref()
        const defaultProps: object = {
            children: 'children',
            label: 'title',
        }

        /*** handleClose 关闭按钮 */
        const handleClose = () => {
            ctx.emit('cancelDataClick')
        }

        /*** handleNodeClick 树型当前节点点击事件 */
        const handleNodeClick = () => {
            let res1 = treeData.value.getCheckedKeys()
            let res2 = treeData.value.getHalfCheckedKeys()
            let subApi = [...res1,...res2]
            subArr = subApi
        }

        /*** watch 监听属性 */
        watch(() => props.isDataDialog,(newVal) => {
            if(newVal){
                state.repeatDis = false
                console.log(props.menuInfo,'menuInfo')
                GetTreeInfo()
            }
        })

        /*** GetTreeInfo 获取组织架构信息 */
        const GetTreeInfo = async () => {
            GetUesInfo()
            try {
                let res: { data: any[] } = await getOrgTree()
                console.log(res.data,'menu12')
            } catch (err) {}
        }

        /*** GetUesInfo 获取用户已拥有的数据 */
        const GetUesInfo = async () => {
            try {
                let res: { data: any[] } = await sysUserOwnData({ id: props.useId })
                // console.log(res.data,'用户拥有的数据')
                defaultChecked.value = res.data
            } catch (err) {}
        }

        /** cancelDataClick 取消按钮 */
        const cancelDataClick = () => {
            ctx.emit('cancelDataClick')
        }

        /** controlDataClick 确定按钮 */
        const controlDataClick = async () => {
            console.log(subArr,'subArr')
            if(subArr.length === 0){
                ElMessage({
                    message: $t('key_61'),
                    type: 'warning',
                    duration:1000,
                })
                return
            }
            let res:any = await sysUserGrantData({ id: props.useId , grantOrgIdList: subArr })
            if (res.success) {
                state.repeatDis = true
                ctx.emit('controlDataClick')
                ctx.emit('updateData')
            }else{
                ctx.emit('controlDataClick')
            }
        }

        /*** dialogVisibled 响应弹窗的关闭  */
        const isDataDialog = computed(() => {
            return props.isDataDialog
        })
        return {
            cancelDataClick,
            controlDataClick,
            showClose: true, // 是否显示关闭按钮
            controlClick: false, // 防止重复提交（false为可以点击，true为禁止点击）
            isDataDialog, // 关闭弹窗的时候需要单独将其导出，注意：放在reactive中无效
            ...toRefs(state),
            defaultProps,
            defaultChecked,
            handleNodeClick,
            treeData,
            handleClose,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>